<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="800" height="800">您的浏览器不支持画布</canvas>
<script type="text/javascript">
//    var box=document.getElementById("box");
//    var pen=box.getContext("2d");
//    pen.clearRect(0,0,box.width,box.height);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.stroke();
////    pen.beginPath();
////    pen.save();
////    pen.translate(-30,-30);
////    pen.scale(1.1,1.1);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.restore();
////    pen.stroke();
////    pen.closePath();
////    pen.beginPath();
////    pen.save();
////    pen.translate(-60,-60);
////    pen.scale(1.2,1.2);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.restore();
////    pen.stroke();
////    pen.closePath();
////    pen.beginPath();
////    pen.save();
////    pen.translate(-90,-90);
////    pen.scale(1.3,1.3);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.restore();
////    pen.stroke();
////    pen.closePath();
////    pen.beginPath();
////    pen.save();
////    pen.translate(-120,-120);
////    pen.scale(1.4,1.4);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.restore();
////    pen.stroke();
////    pen.closePath();
////    pen.beginPath();
////    pen.save();
////    pen.translate(-150,-150);
////    pen.scale(1.5,1.5);
////    pen.arc(300,300,50,0,Math.PI*2,true);
////    pen.restore();
////    pen.stroke();
////    pen.closePath();
//    for(var i=1;i<=50;i+=6){
//        pen.beginPath();
//        pen.save();
//        pen.translate(-30*i,-30*i);
//        pen.scale(1+0.1*i,1+0.1*i);
//        pen.arc(300,300,40,0,Math.PI*2,true);
//        pen.restore();
//        pen.stroke();
//        pen.closePath();
//    }
    function yuan(){
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        pen.clearRect(0,0,box.width,box.height);
            for(var i=1;i<=500;i+=5) {
                var a = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var c = Math.floor(Math.random() * 256);
                pen.strokeStyle = "rgb(" + a + "," + b + "," + c + ")";
                pen.beginPath();
                pen.save();
                pen.translate(-30*i,-30*i);
                pen.scale(1 + 0.1 * i, 1 + 0.1 * i);
                pen.arc(300, 300, 10, 0, Math.PI * 2, true);
                pen.restore();
                pen.stroke();
                pen.closePath();
            }
    }
    window.setInterval(yuan,30);
</script>
</body>
</html>